<template>
  <div class="ems">
    <header>
      <img class="top-title-bg" src="../../assets/bg.png" alt />
      <a-row type="flex" align="bottom">
        <a-col :span="8">
          <a-row class="header-left-time">
            <a-col :span="6" :offset="6">2020年3月24号</a-col>
            <a-col :span="6">18:30</a-col>
          </a-row>
        </a-col>
        <a-col :span="8">
          <h1>医养服务大平台</h1>
        </a-col>
        <a-col :span="8">
          <a-row class="header-right-info">
            <a-col :span="6" :offset="6">
              温度 :
              <span>26.5℃</span>
            </a-col>
            <a-col :span="6">
              湿度 :
              <span>26.5℃</span>
            </a-col>
            <a-col :span="6">
              PM2.5 :
              <span>50</span>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </header>
    <section>
      <a-row :gutter="10">
        <a-col :xxl="6" :xl="7">
          <div class="card">
            <header class="card-title font-white">
              体温告警统计
              <span class="card-title-arro"></span>
              <span class="card-title-arro card-arro-shadow"></span>
            </header>
            <!-- 慢性病数据统计 -->
            <div id="getcircle">
              <div class="onecircle">
                <a-progress type="circle" :percent="75" :width="80" :strokeWidth="10">
                  <template v-slot:format="">
                    <span style="color: #FFF;font-size:12px;">高血压<br/>5842人</span>
                  </template>
                </a-progress>
              </div>
              <div class="onecircle">
                <a-progress type="circle" :percent="75" :width="80" :strokeWidth="10">
                  <template v-slot:format="">
                    <span style="color: #FFF;font-size:12px;">冠心病<br/>5842人</span>
                  </template>
                </a-progress>
              </div>
              <div class="onecircle">
                <a-progress type="circle" :percent="75" :width="80" :strokeWidth="10">
                  <template v-slot:format="">
                    <span style="color: #FFF;font-size:12px;">糖尿病<br/>5842人</span>
                  </template>
                </a-progress>
              </div>
              <div class="onecircle">
                <a-progress type="circle" :percent="75" :width="80" :strokeWidth="10">
                  <template v-slot:format="">
                    <span style="color: #FFF;font-size:12px;">心脏病<br/>5842人</span>
                  </template>
                </a-progress>
              </div>
            </div>
            <!-- 慢性病折线图 -->
            <div id="getmxnum" style="width:100%; height:250px;"></div>
          </div>
          <div class="card">
            <header class="card-title">
              指标告警统计
              <span class="card-title-arro"></span>
              <span class="card-title-arro card-arro-shadow"></span>
            </header>
            <!-- 指标告警统计 -->
            <div id="getzbnum" style="width:100%; height:250px;"></div>
          </div>
        </a-col>
        <a-col :xxl="8" :xl="10">
          <div class="card">
            <header class="card-title font-white">人员分布热力图
              <span class="card-title-arro"></span>
              <span class="card-title-arro card-arro-shadow"></span>
            </header>
            <div class="title">
              <div class="statisticalPopulation">
                <div>当前统计人数</div>
                <div>112,111,115</div>
              </div>
              <div class="time">
                <div>07:12:30</div>
                <div>
                  2020年3月18
                  <span>周三</span>
                </div>
              </div>
              <div class="weather">
                <img src alt />
                <div>
                  <p>多云</p>
                  <p>16-7</p>
                  <p>北京市海淀区</p>
                </div>
              </div>
            </div>
            <!-- 地图 -->
            <div id="getmap" style="width:100%; height:640px;"></div>
          </div>
        </a-col>
        <a-col :xxl="5" :xl="7">
          <div class="card">
            <header class="card-title font-white">慢性人员分布
              <span class="card-title-arro"></span>
              <span class="card-title-arro card-arro-shadow"></span>
            </header>
            <!-- 指标告警统计 -->
            <div id="getmxadd" style="width:100%; height:370px;"></div>
          </div>
          <div class="card">
            <header class="card-title font-white">慢性新增人数 环比图
              <span class="card-title-arro"></span>
              <span class="card-title-arro card-arro-shadow"></span>
            </header>
            <!-- 指标告警统计 -->
            <div id="getmxpeople" style="width:100%; height:250px;"></div>
          </div>
        </a-col>
        <a-col :xxl="5" :xl="0" class="chart">
          <div class="card">
            <header class="card-title font-white">
              驿站分布图列表
              <span class="card-title-arro"></span>
              <span class="card-title-arro card-arro-shadow"></span>
            </header>
            <!-- 驿站分布图列表 -->
            <div class="postStation">
              <table class="tableview" border="0" width="100%">
                <tr>
                  <th>行政区</th>
                  <th>驿站个数</th>
                  <th>医生个数</th>
                </tr>
                <tr>
                  <td>海淀</td>
                  <td>840个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>朝阳</td>
                  <td>450个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>东城</td>
                  <td>95个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>西城</td>
                  <td>21个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>昌平</td>
                  <td>941个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>大兴</td>
                  <td>45个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>房山</td>
                  <td>13个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>通州</td>
                  <td>64个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>顺义</td>
                  <td>84个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>密云</td>
                  <td>12个</td>
                  <td>85</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="card">
            <header class="card-title font-white">
              老年人 人数对比
              <span class="card-title-arro"></span>
              <span class="card-title-arro card-arro-shadow"></span>
            </header>
            <!-- 老年人 人数对比 -->
            <div class="aged">
              <table class="tableview" border="0" width="100%">
                <tr>
                  <th>行政区</th>
                  <th>正常人数</th>
                  <th>异常人数</th>
                </tr>
                <tr>
                  <td>海淀</td>
                  <td>110个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>朝阳</td>
                  <td>90个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>东城</td>
                  <td>70个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>西城</td>
                  <td>20个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>昌平</td>
                  <td>23个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>大兴</td>
                  <td>13个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>房山</td>
                  <td>35个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>通州</td>
                  <td>63个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>顺义</td>
                  <td>28个</td>
                  <td>85</td>
                </tr>
                <tr>
                  <td>密云</td>
                  <td>18个</td>
                  <td>85</td>
                </tr>
              </table>
            </div>
          </div>
        </a-col>
      </a-row>
    </section>
  </div>
</template>

<script>
  // import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
  import 'echarts/map/js/china'
  export default {
    data () {
      return {
      }
    },
    watch: {
    },
    created () {
    },
    mounted () {
      this.$nextTick(() => {
        this.getmxnum(); //调用慢性病数量
        this.getzbnum(); //调用指标告警病统计图
        this.getmxpeople(); //调用慢性病数量
        this.getmxadd(); //调用指标告警病统计图
        this.getmap(); //调用地图数据
      })
    },
    methods: {
      //调用慢性病数量
      getmxnum: function (e) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('getmxnum'),'dark')
          // 指定图表的配置项和数据
          var option = {
              backgroundColor:'', //设置无背景色
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data: ['告警数量']
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      formatter: '{value}'
                  }
              },
              series: [
                  {
                      name: '告警数量',
                      type: 'line',
                      data: [5, 8, 4, 3, 2, 8, 7],
                      markLine: {
                          data: [
                              {type: 'average', name: '平均值'}
                          ]
                      }
                  }
              ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          window.addEventListener("resize",function(){
              myChart.resize();
          });
      },
      //调用指标告警病统计图
      getzbnum: function (e) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('getzbnum'),'dark')
          // 指定图表的配置项和数据
          var option = {
              backgroundColor:'', //设置无背景色
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data: ['体温', '心率']
              },
              calculable: true,
              xAxis: [
                  {
                      type: 'category',
                      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                  }
              ],
              yAxis: [
                  {
                      type: 'value'
                  }
              ],
              series: [
                  {
                      name: '体温',
                      type: 'bar',
                      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                      markPoint: {
                          data: [
                              {type: 'max', name: '最大值'},
                              {type: 'min', name: '最小值'}
                          ]
                      },
                      markLine: {
                          data: [
                              {type: 'average', name: '平均值'}
                          ]
                      }
                  },
                  {
                      name: '心率',
                      type: 'bar',
                      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                      markPoint: {
                          data: [
                              {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
                              {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                          ]
                      },
                      markLine: {
                          data: [
                              {type: 'average', name: '平均值'}
                          ]
                      }
                  }
              ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          window.addEventListener("resize",function(){
              myChart.resize();
          });
      },
      //调用慢性病数量
      getmxpeople: function (e) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('getmxpeople'),'dark')
          // 指定图表的配置项和数据
          var option = {
              backgroundColor:'', //设置无背景色
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data: ['人数']
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      formatter: '{value}'
                  }
              },
              series: [
                  {
                      name: '人数',
                      type: 'line',
                      data: [5, 8, 4, 3, 2, 8, 7],
                      markLine: {
                          data: [
                              {type: 'average', name: '平均值'}
                          ]
                      }
                  }
              ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          window.addEventListener("resize",function(){
              myChart.resize();
          });
      },
      //调用指标告警病统计图
      getmxadd: function (e) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('getmxadd'),'dark')
          // 指定图表的配置项和数据
          var option = {
              backgroundColor:'', //设置无背景色
              tooltip: {
                  trigger: 'axis'
              },
              calculable: true,
              xAxis: [
                  {
                      type: 'category',
                      data: ['海淀', '朝阳', '东城', '西城', '昌平', '大兴', '房山', '通州', '顺义', '密云', '延庆', '丰台']
                  }
              ],
              yAxis: [
                  {
                      type: 'value'
                  }
              ],
              series: [
                  {
                      name: '人员数量',
                      type: 'bar',
                      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                      markPoint: {
                          data: [
                              {type: 'max', name: '最大值'},
                              {type: 'min', name: '最小值'}
                          ]
                      },
                      markLine: {
                          data: [
                              {type: 'average', name: '平均值'}
                          ]
                      }
                  }
              ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          window.addEventListener("resize",function(){
              myChart.resize();
          });
      },
      //调用地图数据
      getmap: function (e) {
          // 基于准备好的dom，初始化echarts实例
          // let myChart = this.$echarts.init(document.getElementById('getmap'),'dark')
          // 指定图表的配置项和数据
          var mapName = "china";
          var data = [
              {name:"北京",value:177},
              {name:"天津",value:42},
              {name:"河北",value:102},
              {name:"山西",value:81},
              {name:"内蒙古",value:47},
              {name:"辽宁",value:67},
              {name:"吉林",value:82},
              {name:"黑龙江",value:66},
              {name:"上海",value:24},
              {name:"江苏",value:92},
              {name:"浙江",value:114},
              {name:"安徽",value:109},
              {name:"福建",value:116},
              {name:"江西",value:91},
              {name:"山东",value:119},
              {name:"河南",value:137},
              {name:"湖北",value:116},
              {name:"湖南",value:114},
              {name:"重庆",value:91},
              {name:"四川",value:125},
              {name:"贵州",value:62},
              {name:"云南",value:83},
              {name:"西藏",value:9},
              {name:"陕西",value:80},
              {name:"甘肃",value:56},
              {name:"青海",value:10},
              {name:"宁夏",value:18},
              {name:"新疆",value:67},
              {name:"广东",value:123},
              {name:"广西",value:59},
              {name:"海南",value:14},
          ];
          var geoCoordMap = {};
          var toolTipData = [
            {
              name: "北京",
              value: [{ name: "男性", value: 95 }, { name: "女性", value: 82 }]
            },
            {
              name: "天津",
              value: [{ name: "男性", value: 22 }, { name: "女性", value: 20 }]
            },
            {
              name: "河北",
              value: [{ name: "男性", value: 60 }, { name: "女性", value: 42 }]
            },
            {
              name: "山西",
              value: [{ name: "男性", value: 40 }, { name: "女性", value: 41 }]
            },
            {
              name: "内蒙古",
              value: [{ name: "男性", value: 23 }, { name: "女性", value: 24 }]
            },
            {
              name: "辽宁",
              value: [{ name: "男性", value: 39 }, { name: "女性", value: 28 }]
            },
            {
              name: "吉林",
              value: [{ name: "男性", value: 41 }, { name: "女性", value: 41 }]
            },
            {
              name: "黑龙江",
              value: [{ name: "男性", value: 35 }, { name: "女性", value: 31 }]
            },
            {
              name: "上海",
              value: [{ name: "男性", value: 12 }, { name: "女性", value: 12 }]
            },
            {
              name: "江苏",
              value: [{ name: "男性", value: 47 }, { name: "女性", value: 45 }]
            },
            {
              name: "浙江",
              value: [{ name: "男性", value: 57 }, { name: "女性", value: 57 }]
            },
            {
              name: "安徽",
              value: [{ name: "男性", value: 57 }, { name: "女性", value: 52 }]
            },
            {
              name: "福建",
              value: [{ name: "男性", value: 59 }, { name: "女性", value: 57 }]
            },
            {
              name: "江西",
              value: [{ name: "男性", value: 49 }, { name: "女性", value: 42 }]
            },
            {
              name: "山东",
              value: [{ name: "男性", value: 67 }, { name: "女性", value: 52 }]
            },
            {
              name: "河南",
              value: [{ name: "男性", value: 69 }, { name: "女性", value: 68 }]
            },
            {
              name: "湖北",
              value: [{ name: "男性", value: 60 }, { name: "女性", value: 56 }]
            },
            {
              name: "湖南",
              value: [{ name: "男性", value: 62 }, { name: "女性", value: 52 }]
            },
            {
              name: "重庆",
              value: [{ name: "男性", value: 47 }, { name: "女性", value: 44 }]
            },
            {
              name: "四川",
              value: [{ name: "男性", value: 65 }, { name: "女性", value: 60 }]
            },
            {
              name: "贵州",
              value: [{ name: "男性", value: 32 }, { name: "女性", value: 30 }]
            },
            {
              name: "云南",
              value: [{ name: "男性", value: 42 }, { name: "女性", value: 41 }]
            },
            {
              name: "西藏",
              value: [{ name: "男性", value: 5 }, { name: "女性", value: 4 }]
            },
            {
              name: "陕西",
              value: [{ name: "男性", value: 38 }, { name: "女性", value: 42 }]
            },
            {
              name: "甘肃",
              value: [{ name: "男性", value: 28 }, { name: "女性", value: 28 }]
            },
            {
              name: "青海",
              value: [{ name: "男性", value: 5 }, { name: "女性", value: 5 }]
            },
            {
              name: "宁夏",
              value: [{ name: "男性", value: 10 }, { name: "女性", value: 8 }]
            },
            {
              name: "新疆",
              value: [{ name: "男性", value: 36 }, { name: "女性", value: 31 }]
            },
            {
              name: "广东",
              value: [{ name: "男性", value: 63 }, { name: "女性", value: 60 }]
            },
            {
              name: "广西",
              value: [{ name: "男性", value: 29 }, { name: "女性", value: 30 }]
            },
            {
              name: "海南",
              value: [{ name: "男性", value: 8 }, { name: "女性", value: 6 }]
            }
          ];

          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('getmap'),'dark')
          // myChart.showLoading();
          var mapFeatures = this.$echarts.getMap(mapName).geoJson.features;
          // myChart.hideLoading();
          mapFeatures.forEach(function(v) {
              // 地区名称
              var name = v.properties.name;
              // 地区经纬度
              geoCoordMap[name] = v.properties.cp;

          });
          // console.log(data);
          // console.log(toolTipData);
          var max = 480,
              min = 9; // todo 
          var maxSize4Pin = 100,
              minSize4Pin = 20;

          var convertData = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name];
              if (geoCoord) {
                res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value)
                });
              }
            }
            return res;
          };
          var option = {
              backgroundColor:'', //设置无背景色
              tooltip: {
                  trigger: 'item',
                  formatter: function(params) {
                      if (typeof(params.value)[2] == "undefined") {
                          var toolTiphtml = ''
                          for(var i = 0;i<toolTipData.length;i++){
                              if(params.name==toolTipData[i].name){
                                  toolTiphtml += toolTipData[i].name+':<br>'
                                  for(var j = 0;j<toolTipData[i].value.length;j++){
                                      toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
                                  }
                              }
                          }
                          console.log(toolTiphtml)
                          // console.log(convertData(data))
                          return toolTiphtml;
                      } else {
                          var toolTiphtml = ''
                          for(var i = 0;i<toolTipData.length;i++){
                              if(params.name==toolTipData[i].name){
                                  toolTiphtml += toolTipData[i].name+':<br>'
                                  for(var j = 0;j<toolTipData[i].value.length;j++){
                                      toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
                                  }
                              }
                          }
                          console.log(toolTiphtml)
                          // console.log(convertData(data))
                          return toolTiphtml;
                      }
                  }
              },
              // legend: {
              //     orient: 'vertical',
              //     y: 'bottom',
              //     x: 'right',
              //     data: ['credit_pm2.5'],
              //     textStyle: {
              //         color: '#fff'
              //     }
              // },
              visualMap: {
                  show: true,
                  min: 0,
                  max: 200,
                  left: 'left',
                  top: 'bottom',
                  text: ['高', '低'], // 文本，默认为数值文本
                  calculable: true,
                  seriesIndex: [1],
                  textStyle: {
                      color: '#fff'
                  },
                  inRange: {
                      // color: ['#3B5077', '#031525'] // 蓝黑
                      // color: ['#ffc0cb', '#800080'] // 红紫
                      // color: ['#3C3B3F', '#605C3C'] // 黑绿
                      // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                      // color: ['#23074d', '#cc5333'] // 紫红
                      color: ['#00467F', '#A5CC82'] // 蓝绿
                      // color: ['#1488CC', '#2B32B2'] // 浅蓝
                      // color: ['#00467F', '#A5CC82'] // 蓝绿
                      // color: ['#00467F', '#A5CC82'] // 蓝绿
                      // color: ['#00467F', '#A5CC82'] // 蓝绿
                      // color: ['#00467F', '#A5CC82'] // 蓝绿

                  }
              },
              /*工具按钮组*/
              // toolbox: {
              //     show: true,
              //     orient: 'vertical',
              //     left: 'right',
              //     top: 'center',
              //     feature: {
              //         dataView: {
              //             readOnly: false
              //         },
              //         restore: {},
              //         saveAsImage: {}
              //     }
              // },
              geo: {
                  show: true,
                  map: mapName,
                  label: {
                      normal: {
                          show: false
                      },
                      emphasis: {
                          show: false,
                      }
                  },
                  roam: true,
                  itemStyle: {
                      normal: {
                          areaColor: '#031525',
                          borderColor: '#3B5077',
                      },
                      emphasis: {
                          areaColor: '#2B91B7',
                      }
                  }
              },
              series: [{
                      name: '散点',
                      type: 'scatter',
                      coordinateSystem: 'geo',
                      data: convertData(data),
                      symbolSize: function(val) {
                          return val[2] / 10;
                      },
                      label: {
                          normal: {
                              formatter: '{b}',
                              position: 'right',
                              show: true
                          },
                          emphasis: {
                              show: true
                          }
                      },
                      itemStyle: {
                          normal: {
                              color: '#05C3F9'
                          }
                      }
                  },
                  {
                      type: 'map',
                      map: mapName,
                      geoIndex: 0,
                      aspectScale: 0.75, //长宽比
                      showLegendSymbol: false, // 存在legend时显示
                      label: {
                          normal: {
                              show: true
                          },
                          emphasis: {
                              show: false,
                              textStyle: {
                                  color: '#fff'
                              }
                          }
                      },
                      roam: true,
                      itemStyle: {
                          normal: {
                              areaColor: '#031525',
                              borderColor: '#3B5077',
                          },
                          emphasis: {
                              areaColor: '#2B91B7'
                          }
                      },
                      animation: false,
                      data: data
                  },
                  {
                      name: '点',
                      type: 'scatter',
                      coordinateSystem: 'geo',
                      symbol: 'pin', //气泡
                      symbolSize: function(val) {
                          var a = (maxSize4Pin - minSize4Pin) / (max - min);
                          var b = minSize4Pin - a * min;
                          b = maxSize4Pin - a * max;
                          return a * val[2] + b;
                      },
                      label: {
                          normal: {
                              show: true,
                              textStyle: {
                                  color: '#fff',
                                  fontSize: 9,
                              }
                          }
                      },
                      itemStyle: {
                          normal: {
                              color: '#F62157', //标志颜色
                          }
                      },
                      zlevel: 6,
                      data: convertData(data),
                  },
                  {
                      name: 'Top 5',
                      type: 'effectScatter',
                      coordinateSystem: 'geo',
                      data: convertData(data.sort(function(a, b) {
                          return b.value - a.value;
                      }).slice(0, 5)),
                      symbolSize: function(val) {
                          return val[2] / 10;
                      },
                      showEffectOn: 'render',
                      rippleEffect: {
                          brushType: 'stroke'
                      },
                      hoverAnimation: true,
                      label: {
                          normal: {
                              formatter: '{b}',
                              position: 'right',
                              show: true
                          }
                      },
                      itemStyle: {
                          normal: {
                              color: 'yellow',
                              shadowBlur: 10,
                              shadowColor: 'yellow'
                          }
                      },
                      zlevel: 1
                  },

              ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          window.addEventListener("resize",function(){
              myChart.resize();
          });
      },
    }
  }
</script>

<style scoped>
@include media-breakpoint-up(xxl) {
  .chart {
    display: none;
  }
}
@include media-breakpoint-up(xl) {
  .chart {
    display: block;
  }
}

@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}
@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin twoTriangle($color) {
  width: 0;
  display: inline-block;
  border: 8.5px solid transparent;
  border-left: 8.5px solid $color;
  border-top: 8.5px solid $color;
}

@mixin triangle($color) {
  position: absolute;
  top: 1px;
  width: 0;
  display: inline-block;
  border: 11.5px solid transparent;
  border-left: 8px solid $color;
}
.card-title-arro {
  position: relative;
  width: 0;
  display: inline-block;
  border: 6px solid transparent;
  border-left: 8px solid #4b659e;
  z-index: 30;
}
.card-arro-shadow {
  left: -13px;
  border-left: 8px solid rgba(39, 48, 81, 0.8);
}
.top-title-bg {
  width: 100%;
  top: -43px;
  height: 148px;
  position: fixed;
  z-index: 1;
}
header {
  background: url(../../assets/top_title_bg.png) no-repeat;
  background-size: 100% 135px;
  background-position: 0px -45px;
}
header h1 {
  position: relative;
  z-index: 10;
  margin: 0;
  padding: 29px 0;
  text-align: center;
  color: #fff;
  font-family: '微软雅黑';
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#a9caf3), to(#f5f9ff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
header .header-left-time {
  background: url(../../assets/header-left-bg.png) no-repeat;
  background-size: 100%;
  padding: 7px;
}
header .header-right-info {
  background: url(../../assets/header-right-bg.png) no-repeat;
  background-size: 100%;
  padding: 7px;
}
.header-right-info span {
  color: #ff9b43;
}
.ems {
  min-height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #121b2c;
  background-image: url('../../assets/bg.png');
  color: #77a3f1;
  font-size: 14px;
}

.indexStatistics {
  height: 200px;
}
.chronicDisease {
  height: 300px;
  border: 1px solid #F00;
}
.title {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.title .statisticalPopulation {
  width: 40%;
  text-align: center;
}
.title .statisticalPopulation div:first-child {
  font-size: 18px;
}
.title .statisticalPopulation div:last-child {
  color: #fff;
}
.time {
  width: 30%;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.time div:last-child {
  font-size: 12px;
}
.weather {
  display: flex;
  align-items: center;
  width: 35%;
}
.weather img {
  width: 35px;
  height: 30px;
  border: 1px solid #fff;
}
.weather div p {
  margin-bottom: 0;
  font-size: 10px;
  margin-left: 5px;
  color: #fff;
}
.personnelDistribution {
  height: 300px;
}
.newNumber {
  height: 200px;
}
.postStation {
  height: 300px;
}
.aged {
  height: 320px;
}

header {
  background-size: 100% 135px;
  background-position: 0px -45px;
}
section {
  padding: 20px;
}
section .card {
  background: rgba(29, 39, 65, 0.8);
  box-shadow: 1px 0px 10px rgba(14, 153, 251, 0.5) inset;
  border: 1px #296098 solid;
  margin-top: 20px;
}
.card-title {
  padding: 15px;
  border-bottom: 1px solid #304671;
  border-image: linear-gradient(to right, #296098, rgba(68, 70, 74, 0.1)) 1;
  background: linear-gradient(to right, #131b2e, rgba(24, 35, 57, 0.5));
  color: #f5a924;
  font-weight: bold;
  margin-bottom: 10px;
}
/* 环形图 */
#getcircle{
   width: 100%;
   height: 100px;
   display: flex;
   justify-content: space-around;
   margin-top: 30px;
}
.onecircle{
  width: 80px;
  height: 80px;
}
div.ant-progress-circle,
div.ant-progress-line {
    margin-right: 8px;
    margin-bottom: 8px;
}

.tableview th{
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
}
.tableview td{
  text-align: center;
  font-size: 14px;
  color: #fff;
}
</style>
